<div class="main-section">
    <h1 class="main-section__title">File input</h1>

    <p class="main-section__intro">
        <code>lx-file-input</code> is a directive that create an <code>input file</code> element.
    </p>

    <p class="main-section__warning">
        This component has been completly reworked since LumX beta version (v0.3.96).<br />Please refer to the updated documentation.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/file-input/includes/basic.html" lx-js-path="/js/file-input/demo/demo-file-input_controller.js"></lx-component>

    <lx-component lx-title="Specify file types" lx-path="/includes/modules/file-input/includes/accept.html" lx-js-path="/js/file-input/demo/demo-file-input_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-label*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>The input label displayed as a placeholder.</td>
                </tr>
                <tr>
                    <td>lx-accept</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Allows the HTML <code>input</code> 'accept' attribute to be included so file types can be specified.</td>
                </tr>
                <tr>
                    <td>lx-callback</td>
                    <td><code>function</code></td>
                    <td></td>
                    <td>The function called once a file is selected with the file object as parameter.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>